<template>
	<jc-page>
		<u-navbar :is-back="false" :title="title" :border-bottom="false"></u-navbar>
		<view class="my-box">
			<!-- 用户 -->
			<view class="user-panel-box">
				<!-- 未登录 -->
				<view v-if="!vuex_hasLogin" class="u-flex" @click="toLogin()">
					<view class="u-m-r-20"><u-avatar size="120"></u-avatar></view>
					<view class="u-flex-1"><view class="u-font-lg">登录 / 注册</view></view>
					<view><u-icon name="arrow-right" color="#969799" size="28"></u-icon></view>
				</view>
				<!-- 已登录 -->
				<view v-if="vuex_hasLogin" class="u-flex" @click="navigateTo('/pages/mine/user/user')">
					<view class="u-m-r-20"><u-avatar :src="list.model.user.userFace" mode="circle" size="120"></u-avatar></view>
					<view class="u-flex-1">
						<view class="u-font-lg">{{ list.model.user.nickName }}</view>
						<view class="u-m-t-10">
							<u-tag v-for="(item, index) in list.model.user.userTag" :key="index" :text="item" mode="plain" type="info" size="mini" class="u-m-r-10" />
						</view>
					</view>
					<view><u-icon name="arrow-right" color="#969799" size="28"></u-icon></view>
				</view>
			</view>

			<!-- 跟踪 -->
			<view class="trace-panel-box">
				<u-grid :col="4" :border="false" class="card-main">
					<u-grid-item>
						<view class="u-font-xl">{{ list.model.trace.product }}</view>
						<view class="u-font-xs u-m-t-10">商品关注</view>
					</u-grid-item>
					<u-grid-item>
						<view class="u-font-xl">{{ list.model.trace.brand }}</view>
						<view class="u-font-xs u-m-t-10">品牌关注</view>
					</u-grid-item>
					<u-grid-item>
						<view class="u-font-xl">{{ list.model.trace.activity }}</view>
						<view class="u-font-xs u-m-t-10">活动关注</view>
					</u-grid-item>
					<u-grid-item>
						<view class="u-font-xl">{{ list.model.trace.history }}</view>
						<view class="u-font-xs u-m-t-10">浏览记录</view>
					</u-grid-item>
				</u-grid>
			</view>

			<u-gap height="20"></u-gap>

			<!-- 订单 -->
			<view class="panel-box">
				<view class="panel-header">
					<u-section title="我的订单" sub-title="查看全部订单" :bold="false" :show-line="false"></u-section>
				</view>
				<u-grid :col="5" :border="false" class="panel-main">
					<u-grid-item><u-icon name="order" label="待付款" size="48" label-size="22" margin-top="14" label-pos="bottom"></u-icon></u-grid-item>
					<u-grid-item><u-icon name="order" label="待发货" size="48" label-size="22" margin-top="14" label-pos="bottom"></u-icon></u-grid-item>
					<u-grid-item><u-icon name="order" label="待收货" size="48" label-size="22" margin-top="14" label-pos="bottom"></u-icon></u-grid-item>
					<u-grid-item><u-icon name="order" label="待评价" size="48" label-size="22" margin-top="14" label-pos="bottom"></u-icon></u-grid-item>
					<u-grid-item><u-icon name="order" label="退款/售后" size="48" label-size="22" margin-top="14" label-pos="bottom"></u-icon></u-grid-item>
				</u-grid>
			</view>

			<u-gap height="20"></u-gap>

			<!-- 钱包 -->
			<view class="card-box">
				<u-grid :col="5" :border="false">
					<u-grid-item>
						<view class="u-font-xl">{{ list.model.wallet.integral }}</view>
						<view class="u-font-xs u-m-t-10">积分</view>
					</u-grid-item>
					<u-grid-item>
						<view class="u-font-xl">{{ list.model.wallet.coupon }}</view>
						<view class="u-font-xs u-m-t-10">优惠券</view>
					</u-grid-item>
					<u-grid-item>
						<view class="u-font-xl">{{ list.model.wallet.redPacket }}</view>
						<view class="u-font-xs u-m-t-10">红包</view>
					</u-grid-item>
					<u-grid-item>
						<view class="u-font-xl">{{ list.model.wallet.money }}</view>
						<view class="u-font-xs u-m-t-10">余额</view>
					</u-grid-item>
					<u-grid-item class="all-order">
						<image class="cut-off-line" src="/static/user/cut_off_line.png" mode=""></image>
						<u-icon name="order" label="我的钱包" size="48" label-size="22" margin-top="14" label-pos="bottom"></u-icon>
					</u-grid-item>
				</u-grid>
			</view>

			<u-gap height="20"></u-gap>

			<!-- 其它 -->
			<view class="other-panel-box">
				<u-cell-group :border="list.border">
					<view class="panel-main">
						<u-cell-item
							:title="item.title"
							:value="item.value"
							@click="handleClick(item.eventName,item.param)"
							:border-bottom="list.borderBottom"
							v-for="(item, index) in cells"
							:key="index"
						></u-cell-item>
					</view>
				</u-cell-group>
			</view>
			<view class="cu-tabbar-height"></view>
		</view>
	</jc-page>
</template>

<script>
export default {
	data() {
		return {
			background: {
				// 导航栏高度(不包括状态栏高度在内，内部自动加上)，注意这里的单位是px
				height: '220px',
				// 导航栏背景图
				background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
				// 还可以设置背景图size属性
				backgroundSize: 'cover',
			},
			pic:'https://uviewui.com/common/logo.png',
			show:true,
			cells: [
				{
					title: '设置',
					value: '',
					param: '/pages/mine/setting/setting',
					eventName: 'navigateTo'
				},
				{
					title: '组件功能演示',
					value: '',
					param: '/pages/mine/demo/demo',
					eventName: 'navigateTo'
				},
				{
					title: '热区功能演示',
					value: '',
					param: '/pages/hotarea/hotarea',
					eventName: 'navigateTo'
				},
				{
					title: '清除缓存',
					value: '',
					param: '',
					eventName: 'clearStorage'
				},
				{
					title: '帮助与反馈',
					value: '',
					param: '',
					eventName: ''
				},
				{
					title: '关于',
					value: 'v1.0.0',
					param: '',
					eventName: ''
				}
			],
			list: {
				border: false,
				borderBottom: false,
				model: {
					user: {
						/* 图像 */
						userFace: '',
						/* 昵称 */
						nickName: '',
						/* 标签 */
						userTag: ['钻石会员', '达人']
					},
					trace: {
						/* 商品关注 */
						product: '0',
						/* 品牌关注 */
						brand: '0',
						/* 活动关注 */
						activity: '0',
						/* 浏览记录 */
						history: '0'
					},
					wallet: {
						/* 积分 */
						integral: '0',
						/* 优惠券 */
						coupon: '0',
						/* 红包 */
						redPacket: '0.00',
						/* 余额 */
						money: '0.00'
					}
				}
			}
		};
	},
	computed: {
		title() {
			return this.$t('mine.title')
		}
	},
	methods: {
		//模拟onShow方法
		onHandleShow() {
			if (this.vuex_hasLogin) {
				this.list.model.user.nickName = this.vuex_user.nickName;
				this.list.model.user.userFace = this.vuex_user.avatarUrl;
			}
		},
		handleClick(eventName,param){
			if(eventName){
				this[eventName](param);
			}else{
				return this.$u.toast('暂未开通');
			}
		},
		toLogin(){
			let _this = this;
			// #ifdef  MP-WEIXIN
			this.$Router.push({path:"/pages/login/mp-login"})
			// #endif
			// #ifndef MP-WEIXIN
			//判断是否是在微信浏览器下 是否获取code
			if(this.vuex_isWechat){
				this.$u.wx.wxOauth();
			}else{
				this.$Router.push({path:"/pages/login/login"})
			}				
			// #endif
		},
		navigateTo(path){
			console.log(path)
			this.$Router.push({path:path})
		},
		clearStorage(){
			// 清空用户信息
			this.$u.vuex('vuex_user', {});
			this.$u.vuex('vuex_token', '');
			this.$u.vuex('vuex_openid', '');
			this.$u.vuex('vuex_hasLogin', false);
			this.$u.vuex('vuex_pageCur', 'home');
			this.$u.vuex('vuex_guide', false);
			uni.showToast({
				title: '清空成功',
				mask: false,
				duration: 1500
			});
		}
	},
	created() {
		if (this.vuex_hasLogin) {
			this.list.model.user.nickName = this.vuex_user.nickName;
			this.list.model.user.userFace = this.vuex_user.avatarUrl;
		}
	}
};
</script>

<style lang="scss" scoped>
.my-box {
	.user-panel-box {
		background-color: #ffffff;
		padding: 10rpx 32rpx 0 32rpx;
	}

	.user-card-box {
		margin: 0 12rpx;
		padding: 20rpx 20rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
	}

	.trace-panel-box {
		background-color: #ffffff;
		padding: 0 10rpx 10rpx 10rpx;
	}

	.trace-card-box {
		margin: 0 12rpx;
		padding: 10rpx 10rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
	}

	.panel-box {
		background-color: #ffffff;

		.panel-header {
			padding: 30rpx 32rpx 20rpx 32rpx;
			border-bottom: 1rpx solid #F5F5F5;
		}

		.panel-main {
			padding: 10rpx 0;
		}
	}

	.card-box {
		padding: 10rpx 0;
		background-color: #ffffff;

		.all-order {
			position: relative;
			.cut-off-line {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 0rpx;
				width: 30rpx;
				height: 160rpx;
			}
		}
	}

	.other-panel-box {
		.panel-main {
			padding: 10rpx 0;
		}
	}

	.other-card-box {
		margin: 0 12rpx;
		padding: 10rpx 0;
		border-radius: 16rpx;
		background-color: #ffffff;
	}
}
</style>